<template>
	<view class="page_container">
		<view class="page_content">
			<view class="common_card">
				<view class="common-bold-title">{{detail.itemName}}</view>
				<view class="location">{{detail.location}}</view>
				
				<view class="grid-row">
					<view class="grid-col">
						<image src="/static/home/user.png" mode="aspectFit" style="width: 26rpx;height: 28rpx;margin-right: 8rpx;"></image>
						<text class="startDateView-text" style="margin-top: -4rpx;">{{projectManager}}</text>
					</view>
					<view class="grid-col phone">
						<image src="/static/home/phone.png" mode="aspectFit" style="width: 26rpx;height: 28rpx;margin-right: 8rpx;margin-top: 3rpx;"></image>
						<text class="startDateView-text" style="margin-top: -4rpx;">联系电话：</text>
						<text class="startDateView-text" style="margin-top: -4rpx;text-decoration: underline;cursor: pointer;" @click.stop="callPhone">{{detail.projectManagerTel}}</text>
					</view>
				</view>
				
				<view class="onlineStatus_content">
					<view class="onlineStatus_item_bkg" :class="index == 0 ? 'bkg_color_blue' : ((index == 1) ? 'bkg_color_green' : 'bkg_color_red')" v-for="(item, index) in deviceOnlineStatusList" :key="index">
						<view class="onlineStatus_item">
							<text class="item_key" :class="index == 0 ? 'bkg_color_blue' : ((index == 1) ? 'bkg_color_green' : 'bkg_color_red')">{{item.total}}</text>
							<text class="item_value">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="common_card bottom-safe-area" style="flex:1;overflow: hidden;">
				<view class="list_content">
					<view class="title_content">
						<view>设备状态</view>
						<view class="button_content">
							<button type="default" class="button_style" :class="currentTabIndex == 0 ? 'button_selected' : 'button_normal'" @click.stop="clickAll">全部</button>
							<button type="default" class="button_style" :class="currentTabIndex == 1 ? 'button_selected' : 'button_normal'" @click.stop="clickOnline">在线</button>
							<button type="default" class="button_style" :class="currentTabIndex == 2 ? 'button_selected' : 'button_normal'" @click.stop="clickOffline">离线</button>
						</view>
					</view>
					
					<view class="scroll_content">
						<scroll-view scroll-y="true" :show-scrollbar="false" enhanced="true" enable-flex="true" style="width: 100%;height: 100%;">
							<template v-if="currentList.length > 0">
								<view class="scroll_item" @click.stop="clickRow" v-for="(item,index) in currentList" :key="index" :data-row="item" :style="(index == detail.devList.length - 1) ? 'margin-bottom:0px;' : 'margin-bottom:32rpx;'">
									<view class="scroll_item_left">
										<image :src="deviceTypeImage(item)" mode="aspectFit" style="width: 40rpx;height: 56rpx;flex-shrink: 0;"></image>
										<view class="scroll_item_col">
											<view class="scroll_item_title">
												<view>{{item.devName}}</view>
												<view class="scroll_item_online_status" :class="item.onStatus == 1 ? 'scroll_item_online_status_online' : 'scroll_item_online_status_offline'"></view>
											</view>
											<view class="scroll_item_date">最后在线：{{item.onTime}}</view>
											<view class="scroll_item_sn">SN：{{item.serialNumber}} 质保期至：{{item.warrantyPeriod}}</view>
										</view>
									</view>
									<image src="/static/project/device_arrow_more.png" mode="aspectFill" style="width: 14rpx;height: 28rpx; flex-shrink: 0; margin-left: 10rpx;"></image>
								</view>
							</template>
							<template v-else>
								<view class="nodata">
									<view class="img"></view>
									<view class="text">暂无数据</view>
								</view>
							</template>
						</scroll-view>
					</view>
		
				</view>
			</view>
		</view>
		
		<view v-if="showAdd" class="add" @click.stop="addDevice">
			<image src="/static/project/add.png" mode="scaleToFit" style="width: 100%;height: 100%;"></image>
		</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				detail:{
					// location:'北京市朝阳区',
					// itemName:'智慧园区项目',
					// itemId:1001,
					// projectManagerTel:'13200010002',
					// projectManager:'哈哈哈',
					// totalDevNum:'45',
					// onlineNum:'5',
					// onlineDevList:[
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:1,
					// 		onTime:'2024-05-19 10:00'
					// 	}
					// ],
					// offlineDevList:[
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:0,
					// 		onTime:'2024-05-19 10:00'
					// 	}
					// ],
					// devList:[
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:1,
					// 		onTime:'2024-05-19 10:00'
					// 	},
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:0,
					// 		onTime:'2024-05-19 10:00'
					// 	},
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:0,
					// 		onTime:'2024-05-19 10:00'
					// 	},
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:0,
					// 		onTime:'2024-05-19 10:00'
					// 	},
						
					// 	{
					// 		devId:'1',
					// 		devName:'设备A',
					// 		devType:'摄像头',
					// 		serialNumber:'LY20240520120000456',
					// 		warrantyPeriod:'2027-01-01',
					// 		onStatus:0,
					// 		onTime:'2024-05-19 10:00'
					// 	}
					// ]
				},
				currentTabIndex:0,
			}
		},
		computed:{
			deviceOnlineStatusList(){
				var list = [{
					name:'总设备数量',
					total:this.detail.totalDevNum,
				},{
					name:'在线设备',
					total:this.detail.onlineNum,
				}];
				return list;
			},
			projectManager(){
				return "项目经理：" + this.detail.projectManager;
			},
			currentList(){
				if(this.currentTabIndex == 1) {
					return this.detail.onlineDevList || [];
				} else if(this.currentTabIndex == 2) {
					return this.detail.offlineDevList || [];
				} else {
					return this.detail.devList || [];
				}
			},
			showAdd(){
				return this.$weixinAuth.canControl(this.$Route.query.itemId);
			}
		},
		onShow() {
			let self = this;
			self.$progressHud.showLoading();
			self.$NetApi.getMethod('/loyu-api/app/item/item/detail',{
				itemId:self.$Route.query.itemId
			}).then(ok => {
				self.$progressHud.hideLoading();
				self.detail = ok.data;
			}, fail => {
				self.$progressHud.hideLoading();
				self.$progressHud.showToast(fail.errMsg || '网络错误');
			})
		},
		methods: {
			deviceTypeImage(item){
				var str = ""
				switch(item.devType) {
					case 1:
					{//--高压/低压预装式
						str = "/static/project/device_type_1.png";
						break;
					}
					case 2:
					{//--低压成套开关设备
						str = "/static/project/device_type_2.png";
						break;
					}
					case 3:
					{//--配电柜
						str = "/static/project/device_type_3.png";
						break;
					}
					case 4:
					{//--动力柜
						str = "/static/project/device_type_4.png";
						break;
					}
					case 5:
					{//--低压无功率补偿装置
						str = "/static/project/device_type_5.png";
						break;
					}
					case 6:
					{//--高压金属铠装移开式开关设备
						str = "/static/project/device_type_6.png";
						break;
					}
					default:{
						str = "";
					}
				}
				return str;
			},
			clickAll(){
				this.currentTabIndex = 0;
			},
			clickOnline(){
				this.currentTabIndex = 1;
			},
			clickOffline(){
				this.currentTabIndex = 2;
			},
			clickRow(e){
				let row = e.currentTarget.dataset.row;
				this.$Router.push({
					path:'/modules/projects/pages/deviceDetail/deviceDetail',
					query:{
						id:row.devId,
						itemId:this.$Route.query.itemId || ''
					}
				})
			},
			addDevice(e){
				uni.scanCode({
					success: (res) => {
						console.log('res: ',res.path);
						const params = this.parseMultipleParams(res.path)
						const devId = params.devId || ''
						
						this.$Router.push({
							path:'/modules/projects/pages/addDevice/addDevice',
							query:{
								devId:devId,
								itemId:this.$Route.query.itemId
							}
						})
					},
					fail: (err) => {
						console.log('err: ',err);
						this.$progressHud.showToast('二维码解析异常');
					}
				})
			},
			parseMultipleParams(path) {
			  const params = {};
			  const queryPart = path.split('?')[1] || '';
			  
			  if (!queryPart) return params; // 无参数时返回空对象
			
			  queryPart.split('&').forEach(pair => {
			    const [key, value] = pair.split('=');
			    if (key) {
			      params[key] = decodeURIComponent(value.replace(/\+/g, ' '));
			    }
			  });
			
			  return params;
			},
			callPhone(){
				let self = this;
				uni.showActionSheet({
					itemList:[self.detail.projectManagerTel],
					title:'拨打电话',
					success: (res) => {
						uni.makePhoneCall({
							phoneNumber:self.detail.projectManagerTel
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_container {
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.page_content {
		flex: 1;
		overflow: hidden;
		
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 32rpx;
	}
	.common_card{
			border-radius: 24rpx;
			background-color: #ffffff;
			box-shadow: 0rpx 2rpx 4px 0rpx rgba(0, 0, 0, 0.05);
			padding: 32rpx;
			margin-left: 32rpx;
			margin-right: 32rpx;
			width: calc(100% - 64rpx);
			flex-shrink: 0;
			overflow: clip;
		}
	.common-bold-title{
		font-size: 36rpx;
		font-weight: 500;
		min-height: 56rpx;
		line-height: 56rpx;
		letter-spacing: normal;
		color: #000000;
		line-height: 56rpx;
	}
	.location{
		margin-top: 24rpx;
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		min-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;
	}
	.grid-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 32rpx;
	}
	.startDateView-text{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	
	.grid-col {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}
	
	.onlineStatus_content{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		column-gap: 32rpx;
		margin-top: 32rpx;
	}
	.onlineStatus_item_bkg{
		border-radius: 24rpx;
		background: #EFF6FF;
		padding: 24rpx;
		flex: 1;
	}
	.bkg_color_red{
		background-color: #FEF2F2;
		color: $power-color-error;
	}
	.bkg_color_green{
		background-color: #F0FDF4;
		color: $power-color-ok;
	}
	.bkg_color_blue{
		background-color: #EFF6FF;
		color: $power-color-primary;
	}
	.onlineStatus_item{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.item_key{
		font-family: Roboto;
		font-size: 40rpx;
		font-weight: 600;
		line-height: 56rpx;
		height: 56rpx;
		letter-spacing: normal;
	}
	.item_value{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #4B5563;;
	}
	
	.list_content{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		row-gap: 32rpx;
	}
	.title_content{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
		
		
		font-family: Roboto;
		font-size: 36rpx;
		font-weight: 500;
		line-height: 56rpx;
		letter-spacing: normal;
		color: #000000;
	}
	.button_content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		gap: 0px 10rpx;
	}
	.button_style{
		border-radius: 8rpx;
		background: rgba(0, 0, 0, 0);
		width: 108rpx;
		height: 60rpx;
		padding: 8rpx 24rpx;
		border-color: #E5E7EB;
		
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		text-align: center;
		letter-spacing: normal;
		color: #4B5563;
	}
	.button_selected{
		color: #FFFFFF;
		background: $power-color-primary;
	}
	.button_normal{
		color: #4B5563;
		background: #FFF;
	}
	
	.scroll_content{
		flex: 1;
		overflow: hidden;
	}
	
	.scroll_content_flex{
		display: flex;
		flex-direction: column;
		row-gap: 32rpx;
	}
	
	.bottom-safe-area{
		padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
	}
	
	.scroll_item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx;
		
		border-radius: 24rpx;
		background: rgba(0, 0, 0, 0);
		box-sizing: border-box;
		border: 2rpx solid #E5E7EB;
	}
	
	.scroll_item_left{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		column-gap: 24rpx;
	}
	
	.scroll_item_col{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		row-gap: 8rpx;
	}
	.scroll_item_title{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: 500;
		line-height: 42rpx;
		letter-spacing: normal;
		color: #000000;
		
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

	}
	.scroll_item_sn{
		font-family: Roboto;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: normal;
		color: #9CA3AF;
		
		word-wrap: break-word;
		word-break: break-all;
	}
	.scroll_item_date{
		font-family: Roboto;
		font-size: 28rpx;
		font-weight: normal;
		line-height: 40rpx;
		letter-spacing: normal;
		color: #6B7280;
	}
	.scroll_item_online_status{
		margin-left: 16rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 9999px;
	}
	.scroll_item_online_status_online{
		background-color: $power-color-ok;
	}
	.scroll_item_online_status_offline{
		background-color: #9CA3AF;
	}
	.nodata {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: transparent;
	}
	.nodata .img {
		width: 50vw;
		height: 41vw;
		margin-bottom: 10rpx;
		background: url(/static/mine/no_data.png) no-repeat center center;
		background-size: 100% auto;
	}
	.nodata .text {
		font-size: 30rpx;
		color: #999;
	}
	.add{
		position: fixed;
		z-index: 100;
		bottom: calc(0px + env(safe-area-inset-bottom));
		right: 32rpx;
		width: 150rpx;
		height: 150rpx;
	}
</style>
